<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3 col-md-2 sidebar">
			<ul class="nav nav-sidebar">
				<c:forEach items="${categories}" var="category">
					<li ><html:link href="">${category.name}</html:link></li>
				</c:forEach>
				<!-- <li class="active"></li> -->
			</ul>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<!-- <div class="row"><div style="height: 50px; background-color: yellow">BANNER</div></div> -->
			<div class="row placeholders">
				<div class="container col-md-12">
					<div class="panel panel-success">
			            <div class="panel-heading">
			              <h3 class="panel-title">New Books</h3>
			            </div>
			            <div class="panel-body">
			            <div ></div>	
			              <div class="col-md-3 col-sm-2">
								<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
								<div><strong>Lake</strong></div>
								<div><small>Banana Yoshimoto</small></div>
								<p style="color: red">56,000d</p>
							</div>
							<div class="col-md-3 col-sm-2">
								<div><img src="resources/images/cover_book_2.jpg" alt="..." class="img-thumbnail"></div>
								<div><strong>ILIAD</strong></div>
								<div><small>Homer</small></div>
								<p style="color: red">159,000d</p>
							</div>
							<div class="col-md-3 col-sm-2">
								<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
								<div><strong>Lake</strong></div>
								<div><small>Banana Yoshimoto</small></div>
								<p style="color: red">56,000d</p>
							</div>
							<div class="col-md-3 col-sm-2">
								<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
								<div><strong>Lake</strong></div>
								<div><small>Banana Yoshimoto</small></div>
								<p style="color: red">56,000d</p>
							</div>
					  	</div>
			        </div>
				</div>
			</div>
			<div class="row">
				<div class="container col-md-12">
					<div class="panel panel-success">
			            <div class="panel-heading">
			              <h3 class="panel-title">Best Sellers</h3>
			            </div>
			            <div class="panel-body">
				            <div class="carousel slide" data-ride="carousel">
				            	
				            	<!-- Wrapper for slides -->
								<div class="carousel-inner">
								  <div class="item active">
								    <div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book_2.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>ILIAD</strong></div>
										<div><small>Homer</small></div>
										<p style="color: red">159,000d</p>
									</div>
								  </div>
								  <div class="item">
								    <div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book_2.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>ILIAD</strong></div>
										<div><small>Homer</small></div>
										<p style="color: red">159,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
									<div class="col-md-3 col-sm-2">
										<div><img src="resources/images/cover_book.jpg" alt="..." class="img-thumbnail"></div>
										<div><strong>Lake</strong></div>
										<div><small>Banana Yoshimoto</small></div>
										<p style="color: red">56,000d</p>
									</div>
								  </div>
								</div>
								
								<!-- Controls -->
								<!-- <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
								  <span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
								  <span class="glyphicon glyphicon-chevron-right"></span>
								</a> -->
				            </div>
					  	</div>
			        </div>
				</div>
			</div>
		</div>
	</div>
</div>